<template>
    <div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>
								2009/11/20
								<br />
							</p>
						</div>
						<div id="topheader">
							<h1 id="title">
								<a href="#">Main</a>
							</h1>
						</div>
						<div id="navigation">
						</div>
					</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						你正在修改 id为: {{$route.query.id}} 的数据
					</h1>
					<form action="emplist.html" method="post">
						<table cellpadding="0" cellspacing="0" border="0"
							class="form_table">
							<tr>
								<td valign="middle" align="right">id:</td>
								<td valign="middle" align="left">{{$route.query.id}}</td>
							</tr>
							<tr>
								<td valign="middle" align="right">姓名:</td>
								<td valign="middle" align="left"><input type="text" class="inputgri" name="name" value="zhangshan" v-model="name"/></td>
							</tr>
							<tr>
								<td valign="middle" align="right">头像:</td>
								<td valign="middle" align="left"><input type="file" name="photo"  ref="phone"/></td>
							</tr>
							<tr>
								<td valign="middle" align="right">工资:</td>
								<td valign="middle" align="left"><input type="text" class="inputgri" name="salary" value="20000" v-model="salary"/></td>
							</tr>
							<tr>
								<td valign="middle" align="right">年龄:</td>
								<td valign="middle" align="left"><input type="text" class="inputgri" name="age" value="20" v-model="age"/></td>
							</tr>
						</table>
						<p>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--							<input type="button" class="button" value="提交" @click="up_emp"/>-->
                            <el-button  :plain="true" type="success" round ><input type="button" class="button" value="提交" @click="up_emp"/></el-button>
						</p>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">
					ABC@126.com
				</div>
			</div>
		</div>
</template>

<script>
    export default {
        name: "updateemp",
        data(){
            return{
                id:'',
                name:"",
                phone:"",
                salary:"",
                age:"",
            }
        },
        methods:{
            up_emp(){
                let phone=this.$refs.phone.files[0]
                let formData=new FormData();
                formData.append("e_name", this.name);
                formData.append("photo", phone);
                formData.append("salary", this.salary);
                formData.append("age", this.age);
                this.$axios({
                    url:"http://127.0.0.1:8000/api/update/"+this.$route.query.id+"/",
                    // url:"http://127.0.0.1:8000/api/update/",
                    method:"post",
                    data:formData,
                    headers:{
                        'content-type': 'multipart/form-data'
                    },
                }).then(res=>{
                    console.log("恭喜你修改信息成功")
                    this.$message({
                      message: '恭喜你，修改信息成功',
                      type: 'success'
                    });
                    this.$router.push("/emplist")
                }).catch(error=>{
                    console.log(error);
                    // alert('修改失败了,看看原因吧')
                    this.$message.error('修改失败:提示信息:');
                })

            }
        },
        // created() {
        //     //获取到上一个页面传递的值,在页面加载前,显示查询到的所有的信息
        //     let e_id=this.$route.query.id;
        //
        //     this.$axios({
        //         url:"http://127.0.0.1:8000/api/update/<str:id>/",
        //         method:"post",
        //
        //     }).then(res=>{
        //         console.log("修改信息成功");
        //         this.$router.push("/emplist")
        //     }).catch(res=>{
        //         console.log(error);
        //         alert("修改发生错误")
        //     })
        // }
    }
</script>

<style scoped>

</style>
